import React, { useState } from 'react';

interface TabsProps {
	tabs: TabItem[];
	onClick?: (item: TabItem, index: number) => void;
}

interface TabItem {
	id: number;
	text: string;
}
const Tabs = (props: TabsProps) => {
	const { tabs, onClick } = props;
	const [acticeIdx, setActiceIdx] = useState<number>(0);
	const handlerClick = (item: TabItem, index: number) => {
		onClick && onClick(item, index);
		console.log(item, index);
		setActiceIdx(index);
	};
	return (
		<ul className="widget-header-tab">
			{tabs.map((item: TabItem, index: number) => (
				<li key={item.id} onClick={() => handlerClick(item, index)}>
					<span className="text">{item.text}</span>
					<span className={acticeIdx === index ? 'active' : ''}></span>
				</li>
			))}
		</ul>
	);
};

export type { TabsProps };

export default Tabs;
